
<script setup>
import { ref, onMounted } from 'vue'
import { getScheduleListAPI,  getScheduleRuleAPI} from '@/api/hospital'
import { useRoute , useRouter} from 'vue-router'

// 全局路由对象
const router = useRouter()

// 页面路由对象
const route = useRoute()

// 分页参数
const currentPage = ref({
    page: 1,
    limit: 6
})

//  科室预约信息
const appointmentInfo = ref({})

// 获取科室预约详情
const getAppointmentInfo = async () => {
    const res = await getScheduleListAPI({
        hoscode: route.query.hoscode,
        depcode: route.query.depcode,
        limit: currentPage.value.limit,
        page: currentPage.value.page
    })
    // console.log(res);
    appointmentInfo.value = res.data

    defaultTime.value = res.data.bookingScheduleList[0]
    console.log(defaultTime.value);
}

// 初始化调用
onMounted(async () => {
    await getAppointmentInfo()
    getSchedule()
})

// 页码切换
const changePage = async () => {
   await getAppointmentInfo()
    getSchedule()
}

// 上午排班数据
const morningList = ref([])

// 下午排班数据
const afternoonList = ref([])

// 默认选中时间
const defaultTime = ref('')

// 获取排班数据
const getSchedule = async () => {
    const res = await getScheduleRuleAPI({
        hoscode: route.query.hoscode, 
        depcode: route.query.depcode, 
        workDate: defaultTime.value.workDate
    })

    console.log(res);
    const arr1 = []
    const arr2 = []
    // 筛选排班数据
    res.data.forEach(item => {
        if (item.workTime == '0') {
            arr1.push(item)
        } else if (item.workTime == '1') {
            arr2.push(item)
        }
    }) 
    // console.log(morningList.value, afternoonList.value);
    // console.log(defaultTime.value);
    morningList.value = arr1
    afternoonList.value = arr2
}

// 切换选中时间
const changeTime = (time) => {
    defaultTime.value = time
    getSchedule()
    console.log(defaultTime.value);
}

// 点击剩余按钮预约
const submitAppointment = (item) => {
    if (defaultTime.status == -1) return 
    router.push({path: '/hospital/register/interface', query: {id: item.id}} )
}
</script>

<template>
    <div class="wrap">
        <div class="top">
            <div class="hospname">{{ appointmentInfo.baseMap?.hosname }}</div>
            <div class="line"></div>
            <div>{{ appointmentInfo.baseMap?.bigname }}</div>
            <div class="hosp"><span>·</span>{{ appointmentInfo.baseMap?.depname }}</div>
        </div>
        <div class="center">
            <div class="title">{{ appointmentInfo.baseMap?.workDateString }}</div>
            <div class="container">
                <div class="item " :class="{active: defaultTime.workDate === item.workDate}" v-for="(item, index) in appointmentInfo.bookingScheduleList
" :key="index" @click="changeTime(item)">
                    <div class="top1"
                        :class="{ active: item.status === -1 || (item.availableNumber === -1 && item.status === 0) }">{{
                            item.workDate }} - {{ item.dayOfWeek }}</div>
                    <div class="bottom">
                        <div v-if="item.status === -1">停止挂号</div>
                        <div v-else-if="item.status === 0">{{ item.availableNumber === -1 ? "约满了" :
                            `有号${item.reservedNumber}` }}</div>
                        <div v-else>即将放号</div>
                    </div>
                </div>
            </div>
            <el-pagination @current-change="changePage" v-model:page-size="currentPage.limit"
                v-model:current-page="currentPage.page" layout="prev, pager, next" :total="appointmentInfo.total" />
        </div>
        <div class="bottom">
            <div v-if="defaultTime.status == 1" class="will">
                <span><span class="time">{{defaultTime.workDateMd}} 8:00 </span><span class="text">放号</span></span>
            </div>
            <div v-else class="doctor">
                <!-- 上午 -->
                <div class="morning">
                    <div class="am">
                    <svg t="1709356682449" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="5054" width="32" height="32">
                        <path
                            d="M904.101037 676.946871H118.670712c-15.461511 0-28.105271-12.535384-28.105271-28.033021 0-15.461511 12.643759-28.105271 28.105271-28.10527h785.430325c15.461511 0 28.105271 12.643759 28.105271 28.10527s-12.607634 28.033021-28.105271 28.033021z m-56.029916-324.980738c-11.018133 10.945883-28.719396 10.945883-39.665279 0-11.018133-10.945883-11.018133-28.755521 0-39.665279l39.665279-39.665279a27.97522 27.97522 0 0 1 39.593029 0 27.93187 27.93187 0 0 1 0 39.665279l-39.593029 39.665279z m-62.279545 212.776406c-26.082269-128.027094-138.683977-224.444789-274.441826-224.44479-135.649474 0-248.287307 96.417696-274.369576 224.44479H177.915755c21.602766-158.263741 162.454244-280.583081 333.433995-280.583081 171.088125 0 311.903478 122.31934 333.506244 280.583081h-59.064418z m-274.441826-336.612997c-15.461511 0-28.033021-12.535384-28.033021-28.10527V143.95823c0-15.461511 12.535384-28.105271 28.033021-28.10527 15.569886 0 28.105271 12.643759 28.10527 28.10527v56.029916c0 15.606011-12.535384 28.141396-28.10527 28.141396zM174.700628 351.966133L135.035349 312.264729c-10.945883-10.945883-10.945883-28.755521 0-39.665279 11.018133-10.945883 28.719396-10.945883 39.665279 0l39.665279 39.665279a27.93187 27.93187 0 0 1 0 39.665279c-10.909758 10.982008-28.647146 10.982008-39.665279 0.036125z m-28.033021 381.119029h729.40041c15.497636 0 28.033021 12.535384 28.03302 28.03302a28.033021 28.033021 0 0 1-28.03302 28.033021H146.667607c-15.497636 0-28.033021-12.535384-28.03302-28.033021 0.036125-15.497636 12.571509-28.033021 28.03302-28.03302z m84.171312 112.168207h561.093911c15.497636 0 28.033021 12.535384 28.033021 28.033021 0 15.569886-12.535384 28.105271-28.033021 28.10527H230.838919c-15.497636 0-28.033021-12.535384-28.03302-28.10527 0-15.497636 12.535384-28.033021 28.03302-28.033021z"
                            fill="#1296db" p-id="5055"></path>
                    </svg>
                    <span>上午号源</span>
                
                </div>
                <ul class="list">
                    <li v-for="item in morningList">
                            <div class="left">
                                <div class="header">
                                    <div class="work">{{ item.title }}</div>
                                    <div class="line">|</div>
                                    <div class="name">{{ item.docname }}</div>
                                </div>
                                <div class="footer">
                                    <span>{{ item.skill }}</span>
                                    
                                </div>
                            </div>
                            <div class="right">
                                <div class="price"><span>￥</span>{{ item.amount }}</div>
                                <el-button :disabled="defaultTime.status == -1" class="count"  :type="defaultTime.status == -1 ? 'info' : 'primary'" @click="submitAppointment(item)">
                                剩余{{ item.availableNumber }}
                                </el-button>
                            </div>
                    </li>
                    
                </ul>
                </div>
                <!-- 下午 -->
                <div class="afternoon">
                    <div class="pm">
                    <svg t="1709356853639" class="icon" viewBox="0 0 1024 1024" version="1.1"
                        xmlns="http://www.w3.org/2000/svg" p-id="6427" width="32" height="32">
                        <path
                            d="M1005.952 248.32c5.76 0 10.496 4.736 10.496 10.496V305.92c0 5.76-4.736 10.496-10.496 10.496H822.144l2.304 14.976c2.688 17.152 3.84 31.488 3.84 45.056 0 84.48-32.896 163.968-92.672 223.616-59.648 59.776-139.136 92.672-223.616 92.672-84.48 0-163.968-32.896-223.616-92.672s-92.672-139.136-92.672-223.616c0-13.568 1.28-27.904 3.84-45.056l2.304-14.976H18.048c-5.76 0-10.496-4.736-10.496-10.496v-47.104c0-5.76 4.736-10.496 10.496-10.496h987.904zM512 624.768c136.96 0 248.32-111.36 248.32-248.32 0-15.488-1.792-31.36-5.76-49.792l-2.176-10.368H271.616l-2.176 10.368c-3.84 18.432-5.76 34.304-5.76 49.792 0 136.96 111.36 248.32 248.32 248.32zM212.608 632.064c2.816 0 5.376 1.152 7.424 3.072l33.28 33.28c4.096 4.096 4.096 10.752 0 14.848l-99.84 99.84c-1.92 1.92-4.608 3.072-7.424 3.072s-5.376-1.152-7.424-3.072l-33.28-33.28c-1.92-1.92-3.072-4.608-3.072-7.424 0-2.816 1.152-5.376 3.072-7.424l99.84-99.84c1.92-1.92 4.608-3.072 7.424-3.072zM535.552 765.824c5.76 0 10.496 4.736 10.496 10.496v141.184c0 5.76-4.736 10.496-10.496 10.496h-47.104c-5.76 0-10.496-4.736-10.496-10.496V776.32c0-5.76 4.736-10.496 10.496-10.496h47.104zM811.392 632.064c2.816 0 5.376 1.152 7.424 3.072l99.84 99.84c4.096 4.096 4.096 10.752 0 14.848l-33.28 33.28c-1.92 1.92-4.608 3.072-7.424 3.072-2.816 0-5.376-1.152-7.424-3.072l-99.84-99.84c-1.92-1.92-3.072-4.608-3.072-7.424 0-2.816 1.152-5.376 3.072-7.424l33.28-33.28c2.048-1.92 4.608-3.072 7.424-3.072zM864.896 96c5.76 0 10.496 4.736 10.496 10.496V153.6c0 5.76-4.736 10.496-10.496 10.496H159.104c-5.76 0-10.496-4.736-10.496-10.496V106.496c0-5.76 4.736-10.496 10.496-10.496h705.792z"
                            fill="#1296db" p-id="6428"></path>
                    </svg>
                    <span>下午号源</span>
                </div>
                <ul class="list">
                    <li v-for="item in afternoonList">
                        <div class="left">
                                <div class="header">
                                    <div class="work">{{ item.title }}</div>
                                    <div class="line">|</div>
                                    <div class="name">{{ item.docname }}</div>
                                </div>
                                <div class="footer">
                                    <span>{{ item.skill }}</span>
                                    
                                </div>
                            </div>
                            <div class="right">
                                <div class="price"><span>￥</span>{{ item.amount }}</div>
                                <el-button :disabled="defaultTime.status == -1" class="count"  :type="defaultTime.status == -1 ? 'info' : 'primary'" @click="submitAppointment(item)">
                                剩余{{ item.availableNumber }}
                                </el-button>
                            </div>
                    </li>
                    
                </ul>
                </div>
            </div>
        </div>
    </div>
</template>


<style lang="scss" scoped>
.wrap {
    width: 1000px;

    .top {
        display: flex;
        color: #7f7f7f;
        align-items: center;

        .hospname {
            margin-left: 20px;
        }

        .line {
            height: 15px;
            width: 2px;
            // background-color: #7f7f7f;
            border-right: 2px solid #7f7f7f;
            margin: 0 5px;
            // margin-left: 20px;

        }

        .hosp span {
            line-height: 10px;
            font-size: 20px;
            margin: 0 10px;
        }

    }

    .center {
        width: 100%;
        margin: 20px 0;
        display: flex;
        flex-direction: column;
        align-items: center;

        .title {
            font-size: 24px;
            font-weight: 700;
        }

        .container {
            margin-left: 30px;
            width: 100%;
            display: flex;
            // justify-content: space-evenly;
            margin-top: 30px;

            .item {
                flex: 1;
                width: 100%;
                border: 1px solid #7f7f7f;
                margin: 0 5px;
                margin-top: 20px;
                // height: 30px;
                display: flex;
                flex-direction: column;
                align-items: center;
                justify-content: center;
                cursor: pointer;
                &.active {
                    // border-color: rgb( 55,153,255);
                    border: 2px solid rgb( 55,153,255);
                    box-shadow: 0 0 10px 2px rgb( 55,153,255);
                }
                .top1 {
                    width: 100%;
                    height: 30px;
                    background-color: rgb(81, 204, 226, 0.4);
                    text-align: center;
                    line-height: 30px;

                    &.active {
                        background-color: #cccaca;
                    }

                }

                .bottom {
                    width: 100%;
                    height: 60px;
                    text-align: center;
                    line-height: 60px;
                }
            }
        }

        .el-pagination {
            margin-top: 30px;
        }
    }

    .bottom {
        .will {
            text-align: center;
            width: 100%;
            font-size: 30px;
            font-weight: 700;

            .time {
                color: rgb(81, 204, 226);
            }

            .text {
                color: #7f7f7f;
            }
        }

        .doctor {
            margin-left: 50px;

            .am,.pm  {
                display: flex;
                align-items: center;
                margin-top: 20px;
                span {
                    font-size: 20px;
                    color: #7f7f7f;
                    font-weight: 700;
                    margin-left: 20px;
                }
            }
            .morning, .afternoon {
                .list {
                    width: 100%;
                    list-style: none;
                    padding: 0;
                    padding-right: 40px;
                    li {
                        width: 100%;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        padding: 10px;
                        border-bottom: 1px solid #efefef;
                        .left {
                            .header {
                                display: flex;
                                align-items: center;
                                .work , .name{
                                    font-weight: 700;
                                    color: rgb( 55,153,255);
                                    font-size: 20px;
                                }
                                .line {
                                    margin: 0 15px;
                                    color: rgb( 55,153,255);
                                    font-weight: 700;
                                    font-size: 20px;
                                }
                                
                            }
                            .footer {
                                margin: 15px 0;
                                span {
                                    color: #7f7f7f;
                                }
                            }
                        }
                        .right {
                            // margin-right: 40px;
                            display: flex;
                            align-items: center;
                            .price {
                                margin-right: 20px;
                                font-size: 24px;
                                color: red;

                                span {
                                    margin-right: 10px;
                                    font-size: 24px;
                                    font-weight: 700;
                                }
                            }
                            .count {
                                cursor: pointer;
                                width: 130px;
                                height: 50px;
                                // background-color: rgb( 55,153,255);
                                border-radius: 10px;
                                text-align: center;
                                line-height: 50px;
                                font-size: 18px;
                                // font-weight: 700;
                                color: #fff;
                                &.disabled {
                                    cursor: not-allowed;
                                    background-color: #c2bfbf;
                                }
                            }
                        }
                    }
                }
            }
        }
    }
}</style>